
<script>
export default {
  data() {
    return {
      user_id:1001,
      products: [], //存储查询的收藏商品记录信息
      goods_name:''
    };
  },
created() {
  this.user_id=localStorage.getItem('user_id');
},
  methods: {
    LoadCollectionInfo(){
      this.$http.get("http://localhost:8080/collect/query",{params:{
          user_id:this.user_id
        }}).then((res)=>{
        this.products=res.data
        console.log(this.products);
      }).catch(function(err){
        console.log(err);
      })
    },
    LoadCollectionByNameInfo(){
      this.$http.get("http://localhost:8080/collect/queryByName",{params:{
          user_id:this.user_id,
          goods_name:this.goods_name
        }}).then((res)=>{
        this.products=res.data
        console.log(this.products);
      }).catch(function(err){
        console.log(err);
      })
    },

  },
  mounted(){

    this.LoadCollectionInfo();
    this.LoadCollectionByNameInfo()

  }
}
</script>

<template>
  <el-card>
    <div class="search-box-right">
      <el-input
          v-model="goods_name"
          style="width:200px"
          size="default"
          placeholder="请输入商品名称"
          clearable
      />
      &nbsp&nbsp
      <el-button type="primary" round @click="LoadCollectionByNameInfo()">搜索</el-button>
    </div>
    <el-divider border-style="dashed" />
    <div class="product-list">
      <div  v-for="product in products" :key="products.user_id" class="product-item">
        <img :src="'http://localhost:8080/image/upload/'+product.goods_image"   alt="goods_image" style="wdith:200px;height:200px" />
        <div class="product-info">
          <h3>{{ product.goods_name }}</h3>
          <h2>价格：￥{{ product.goods_price }}</h2>
        </div>
      </div>
    </div>


  </el-card>
</template>


<style scoped>
.active {
  background-color: #f0f0f0;}
.date {
  font-size: 20px;
  font-weight: bold;
}
.week {
  font-size: 15px;
}
.timeline {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
}
.timeline-item {
  width: 14.28%;
  text-align: center;
  cursor: pointer;
}
.search-box-right {
  margin-bottom: 20px;
  text-align: center;
}
.product-list {
  display:grid;
  flex-wrap:wrap;
}
.row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
.col-lg-2 col-md-4 col-6{
  width: 100%;
}
.product-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%; /* 设置容器宽度 */
  position: relative;
}
.image-container {
  width: 100%; /* 图片容器宽度占满父级宽度 */
}
.product-item img {
  width: 180px;
  height: 100px;
  display: flex;
  margin: 20px;
  object-fit: cover;
}
.product-info {
  color: #4f4d4d;
  text-align: center;
}
</style>

